<template>
  <div>
    <my-table :data="tableData">
      <template slot-scope="scope">
        <div v-if="scope.row.tag === '家'">
          <span style="color:blue;"> {{ scope.row.tag }}</span>
        </div>
        <div v-if="scope.row.tag === '公司'">
          <span style="color:green;"> {{ scope.row.tag }}</span>
        </div>
      </template>
      <template slot="avatar" slot-scope="scope">
        <img style="width:100px;height:100px;" :src="scope.row.avatar" alt="" />
      </template>
    </my-table>
  </div>
</template>

<script>
import myTable from './myTable'
export default {
  components: {
    myTable
  },
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          tag: '家',
          avatar:
            'http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&f=JPEG?w=1200&h=1290'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          tag: '公司',
          avatar:
            'http://t7.baidu.com/it/u=3616242789,1098670747&fm=79&app=86&f=JPEG?w=900&h=1350'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          tag: '家',
          avatar:
            'http://t8.baidu.com/it/u=581096476,2560083681&fm=79&app=86&f=JPEG?w=1242&h=1800'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          tag: '公司',
          avatar:
            'http://t9.baidu.com/it/u=1761131378,1355750940&fm=79&app=86&f=JPEG?w=667&h=1000'
        }
      ]
    }
  }
}
</script>
